<template>
  <img
    class="avatar-container"
    :src="url"
    :style="{
      width: size + 'px',
      height: size + 'px',
    }"
  />
</template>

<script>
export default {
  name: 'index',
  props: {
    url: {
      type: String, // url属性必须是一个字符串
      required: true, // 属性必传
    },
    size: {
      type: Number,
      default: 150,
    },
  },
};
</script>

<style scoped>
/* 带有作用域的样式 */
.avatar-container {
  border-radius: 50%;
  object-fit: cover;
  /* o;//这个属性用于控制元素（如图片）在其容器中的适应方式。当设置为 cover 时，元素会保持其纵横比，并尽可能地填充容器。如果元素的纵横比与容器的纵横比不同，元素的一部分可能会被裁剪 */
  display: block;
}
</style>
